/* 
  //---- 混入文件  ----//
  混入,可以理解为页面的补充
  用来抽取,处理重复代码
  这个感觉和VueX,事件总线差不多啊.这个可以将所有公共部分,事件属性等等,都可以,
  混入,可以用来做页面的补充,里面写的内容,都会和原有页面内容.进行混合,搭配
*/

//引入依赖
import { debounce } from './utils'
import BackTop from 'components/content/backTop/BackTop'

//图片事件总线监听混入
export const itemImglistener = {
  data() {
    return {
      itemImglistener: null
    }
  },
  mounted() {
    /*
      Vuex:
        在Vue中,vuex是一种状态管理模式,用来管理一些属性状态
      事件总线:
        在Vue中,有一个事件总线对象,我们可以通过事件总线来管理事件,
        它和Vuex一样,是一个独立开来,每一个组件都能访问的,而且没有mutations的限制,
        通过$bus.$emit() 发射事件到总线,总线会保管
        通过$bus.$on() 进行监听
    */
    //监听事件总线
    //使用事件混入,复用监听方法
    const refresh = debounce(this.$refs.scroll.refresh, 200)
    this.itemImglistener = () => {
      refresh()
    }
    this.$bus.$on('imgLoad', this.itemImglistener)
  }
}
export const backTop = {
  components: {
    BackTop
  },
  data() {
    return {
      isShowBkTop: false
    }
  },
  methods: {
    //返回顶部
    //使用混入复用
    backClick() {
      //父组件访问子组件的属性
      //事件使用.native修饰符,监听组件点击
      // this.$refs.scroll.scroll.scrollTo(0, 0, 500)
      this.$refs.scroll.scrollTo(0, 0)
    },
    goBackTop(p) {
      //动态展示返回顶部按钮
      this.isShowBkTop = -p.y >= 1000
    }
  }
}
